<template>
    <h1 style="margin: 20px 0;">已注册用户</h1>
    <div class="users-grid">
        <div class="user-info" v-for="user in userArray">
            <div class="touxiang">
                <el-avatar size="large"><User /></el-avatar>
            </div>
            <el-link underline="never" @click="router.push('/user/info?id='+user.id)">
                <p style="text-align: center;">{{ user.username }}</p>
            </el-link>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import router from '@/router';

//自定义变量保存用户数组
const userArray = ref([]);

onMounted(()=>{loadUsers()});

function loadUsers() {
    axios.get(BASE_URL+'/v1/user/query')
  .then((response)=>{
    if (response.data.code == 0) {
      console.log(response.data.data);
      userArray.value = response.data.data;

    }
    else {
      ElMessage.error('失败的宇宙');
    }
  });
}

</script>

<style>
.users-grid {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.user-info {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
}

.touxiang {
    text-align: center;
}
</style>